<breadcrumb></breadcrumb>

<mat-card>
  <mat-form-field>
    List length:
    <input matInput [(ngModel)]="length">
  </mat-form-field>

  <mat-form-field>
    Page size:
    <input matInput [(ngModel)]="pageSize">
  </mat-form-field>
  <mat-form-field>
    Page size options:
    <input matInput [ngModel]="pageSizeOptions" (ngModelChange)="setPageSizeOptions($event)">
  </mat-form-field>

  <mat-paginator [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
                 (page)="pageEvent = $event">
  </mat-paginator>

  <div *ngIf="pageEvent">
    <h5>Page Change Event Properties</h5>
    <div>List length: {{pageEvent.length}}</div>
    <div>Page size: {{pageEvent.pageSize}}</div>
    <div>Page index: {{pageEvent.pageIndex}}</div>
  </div>
</mat-card>